<template>
  <div class="allinfo"
       style="height:900px">
    <!-- 第一行 -->
    <div class="hhh">
      <div style="font-weight:bold;position: relative; margin-left:20px;top:15px">新增结算单(按上游单结算)</div>
      <div class="submitandcancel">
        <el-button type="primary"
                   @click="add_table"
                   icon="el-icon-success">保存</el-button>
        <el-button type="primary"
                   @click="cancel_table"
                   icon="el-icon-close">返回</el-button>
      </div>
      <hr>
    </div>
    <!-- 基本信息栏 -->
    <div>
      <!-- 第二行 -->
      <div>
        <span class="infoborder">基本信息</span>
      </div>
      <!-- 选填信息 -->
      <div style="margin-top:20px">
        <el-form :inline="true"
                 :label-position="left"
                 label-width="80px"
                 :model="formLabelAlign">
          <el-row>
            <el-col span="7"
                    offset="1">
              <el-form-item label="品类">
                <el-select v-model="formdata.ordertype"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.ordertype"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:55px">
              <el-form-item label="类型">
                <el-select v-model="formdata.warehouse"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.warehouse"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:0px">
              <el-form-item label="客户">
                <el-select v-model="formdata.client"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.client"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>

            <el-col span="7"
                    style="margin-left:70px">
              <el-form-item label="结算单号">
                <el-input v-model="formdata.order_num"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:55px">
              <el-form-item label="仓库">
                <el-select v-model="formdata.productline "
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.productline"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    offset="1"
                    style="margin-left:0px">
              <el-form-item label="成色">
                <el-select v-model="formdata.purity"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.purity"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col span="7"
                    offset="1"
                    style="margin-left:70px">
              <el-form-item label="状态">
                <el-select v-model="formdata.status"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.status"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col span="7"
                    style="margin-left:70px">
              <el-form-item label="制单时间">
                <el-input v-model="formdata.makingtime"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col span="7">
              <el-form-item label="结算类型">
                <el-input v-model="formdata.packingtype"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
      </div>
    </div>
    <!-- 结算信息栏 -->
    <div>
      <div>
        <span class="infoborder">结算信息</span>

        <div class="submitandcancel">
          <el-button type="primary"
                     icon="el-icon-s-order"
                     @click="test">结算</el-button>
          <el-button type="primary"
                   style="float:right"
                  @click="table = true"
                  icon="el-icon-circle-plus-outline">
         添加
        </el-button>
        </div>

        <!-- 添加按钮里的数据展示 -->
        <el-drawer
  title="选择客户的商品"
  :visible.sync="table"
  direction="ttb"
  size="50%">
    <el-table
    ref="multipleTable"
    :data="gridData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号"
      width="120"
      prop="id">
    </el-table-column>
    <el-table-column
      prop="goodsname"
      label="产品名称"
      width="300">
    </el-table-column>
    <el-table-column
      prop="client"
      label="客户">
    </el-table-column>
        <el-table-column
      prop="purity"
      label="成色"
      show-overflow-tooltip>
    </el-table-column>
        <el-table-column
      prop="weight"
      label="重量"
      show-overflow-tooltip>
    </el-table-column>
        <el-table-column
      prop="amount"
      label="数量"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
    <div style="margin-top: 100px;margin-left:800px">
    <el-button @click="addconfirm">确定</el-button>
    <el-button >取消</el-button>
  </div>
</el-drawer>

        <!-- 产品选择 -->
       
      </div>
      <el-table :data="selectorderlist"
                style="width: 2000px"
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange">

        <el-table-column type="selection"
                         width="55">
        </el-table-column>

        <el-table-column prop="packingnum"
                         label="打包单号">
        </el-table-column>

        <el-table-column prop="client"
                         label="客户"
                         width="150">
        </el-table-column>

                <el-table-column prop="warehouse"
                         label="仓库"
                         width="150">
        </el-table-column>

                <el-table-column prop="productline"
                         label="产品线"
                         width="150">
        </el-table-column>

                        <el-table-column prop="productline"
                         label="品类"
                         width="150">
        </el-table-column>

        <el-table-column prop="purity"
                         label="成色"
                         width="150">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="150">
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="150">
        </el-table-column>
        <el-table-column prop="extra_g_for_fee"
                         label="附加克工费">
        </el-table-column>
        <el-table-column label="操作">
                   <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRow(scope.$index, selectorderlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aaa:"asdfasd",

      //被勾选加入打包列表的产品
       multipleSelection: [],
      //添加按钮
      table: false,
      // 被勾选打包产品的数组
      packinggoods: [],
      //设置删除按钮
      deleteinfo: false,
      //设置详情键按钮
      detailinfo: false,
      // 基础信息
      formdata: {
        ordertype: '',
        warehouse: '',
        client: '',
        warehouse: '',
        status: '',
        productline: '',
        makingtime: this.getTime(),
        order_num: this.createOrder(),
        packingtype: '',
      },

      formLabelAlign: {
        name: '',
        region: '',
        type: 'aaa',
        ordertype: [
          {
            label: '采购入库',
          },
        ],
        warehouse: [
          {
            label: 'A仓库',
          },
          {
            label: 'B仓库',
          },
        ],
        client: [
          {
            label: '小王',
          },
          {
            label: '老王',
          },
        ],
        status: [
          {
            label: '草稿',
          },
          {
            label: '已完成',
          },
        ],
        productline: [
          {
            label: '生产线A',
          },
          {
            label: '生产线B',
          },
        ],
                purity: [
          {
            label: '999金',
          },
          {
            label: '9999金',
          },
        ],
      },

      //生成的打包信息展示
      packinginfoshow:[
                {
          id: 1,
          packingnum:"1312312",
          client: '老王',
          barecode:'13123',
          warehouse: '0220202',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
      ],

      //被选择的产品栏展示
      selectorderlist: [
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
        {
          id: 1,
          goodsinfo: 11,
          goodsname: '千足金',
          barecode: '0220202',
          client: '张三',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
          extra_g_for_fee: 5,
        },
      ],
      //添加按钮里的数据
       // 添加商品信息
      table: false,
      loading: false,
      gridData: [        {
          id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        },
         {
               id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        },
         {
               id: 1,
          goodsname: '千足金',
          client: '张狗',
          purity: '千足金',
          weight: 1.3,
          amount: 20,
        }],
       
    }
  },
  methods: {
    //删除打包单信息当前行
    deletepackingRow(index,rows){
      rows.splice(index,1)
      var packinginfoshow = this.packinginfoshow
    },


    //删除产品信息当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
      var selectorderlist = this.selectorderlist
    },

    //打包按钮
    test() {
      alert(this.$data.packinggoods)
    },

    add_table: {
      //提交选货单
    },
    cancel_table: {
      //取消填写的选货单
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    //生成订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'DB' + date.getTime()
      console.log(date)
      return ordernum
    },

    // 全选功能方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 设置删除按钮
    open(index,rows) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
       rows.splice(index,1)
      var packinginfoshow = this.packinginfoshow
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  // 添加确定按钮
  addconfirm(){
    // alert(this.$data.multipleSelection)
    console.log(this.$data.multipleSelection);
  }

  },
  created() {
    let packingtype = '按产品结算'
    this.formdata.packingtype = packingtype
  },
}
</script>

<style scoped>
.submitandcancel {
  margin-left: 1450px;
  margin-top: -13px;
}
.allinfo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
  top: 10px;
  border-color: white white white skyblue;
}
</style>
